<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插入式聊天专家</title>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.2/socket.io.min.js"></script>
<body style="background-color: wheat;">
    <div id="app">
        <el-container>
            <el-header>插入式聊天专家2.0</el-header>
            <el-main>
                <h1 style="font-size: 50px;">插入式聊天专家</h1>
                <h1>版本:v.2.0.5</h1>
                <p>安装方式</p>
                <p>步骤1：在任何浏览器任何网页中按下F12打开开发者工具（部分浏览器可能不是F12,可以右键选择检查）</p>
                <p>步骤2：复制下列代码到控制台（console）窗口，按下回车即可把聊天专家插入到当前网页中。</p>
                <iframe src="code.txt" style="min-width: 800px;"></iframe>
                <p>另有油猴脚本代码</p>
                <iframe src="monkey.txt" style="min-width: 800px;"></iframe>
                <p>功能</p>
                <p>1、支持文字在线聊天。</p>
                <p>2、支持截屏发送到在线聊天。（window10 自带的截屏 win + shift + s 截屏后粘贴到编辑框即可发送图片。）</p>
                <p>3、支持更多有趣的功能。（在聊天界面输入help查看更多功能。）</p>
                <h1>左上角演示了插入效果。</h1>
            </el-main>
          </el-container>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {

            },
            computed: {

            },
            watch: {
            },
            mounted() {
                let div = document.createElement("div");div.innerHTML  =`    <div style="z-index:99999;position: fixed;top: 0;left: 0;display: flex;flex-direction: column;">
                    <iframe id="xx_iframe" style="display:none;width: 400px;height: 300px;" src="https://www.xiaotao2333.top:7788/index.html"></iframe>
                    <button style="text-align:center;" onclick="document.getElementById('xx_iframe').style.display=='block'?document.getElementById('xx_iframe').style.display='none':document.getElementById('xx_iframe').style.display='block'">...</div>
                </button>`;document.body.appendChild(div)
            },
            updated() {

            },
            methods: {

            },
            
        })
    </script>
</body>
<style>
    .el-message {
        min-width: 80% !important;
    }
    .el-message-box {
        width: auto !important;
    }
    .name {
        color: blue;
        font-size: 20px;
        font-family: fantasy;
    }
    #showDiv{
        margin-bottom: 60px;
    }
    .el-footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: left;
        line-height: 60px;
    }
    .el-main {
        padding: 10px;
        background-color: wheat;
        color: #333;
        text-align: center;
    }
    body {
        margin: 0px;
        padding: 0px;
    }
    *::-webkit-scrollbar {
    width: 5px;
    }
    *::-webkit-scrollbar-track {
    background: #f6f6f6;
    border-radius: 2px;
    }
    *::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 2px;
    }
    *::-webkit-scrollbar-thumb:hover {
    background: #747474;
    /* width: px;*/
    }
    *::-webkit-scrollbar-corner {
    background: #f6f6f6;
    }
</style>
</html>